<template>
    <div>
        <van-sticky>
            <van-nav-bar v-if="onIs ==0" :title="userName+'的关注列表'" left-text="返回" left-arrow @click-left="onClickLeft" />
            <van-nav-bar v-if="onIs ==1" :title="userName+'被这些人关注'" left-text="返回" left-arrow @click-left="onClickLeft" />
        </van-sticky>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <!-- <van-row justify="space-between" style="display:flex;justify-content:space-between;height:60px" v-for="item in attentionList" :key="item.attentionId" @click="onClick(item)">
                    <P style="width:100px;" v-text="item.userName"></P>
                    <p>关注时间</p>
                    <P v-text="item.creationTime"></P>
                </van-row> -->
                <van-swipe-cell v-for="item in attentionList" :key="item.attentionId">
                    <!-- <template #left>
                        <van-button square type="danger" text="取关" />
                        <van-button square type="primary" text="关注" />
                    </template> -->
                    <div justify="space-between" style="display:flex;justify-content:space-between;height:60px" @click="onClick(item)">
                        <P style="width:100px;" v-text="item.userName"></P>
                        <p>关注时间</p>
                        <P v-text="item.creationTime"></P>
                    </div>
                    <!-- <van-cell :border="false" :title="item.userName" :value="item.creationTime"  /> -->
                    <template #right>
                        <van-button square type="danger" text="取关" @click="onDel(item)" />
                        <van-button square type="primary" text="关注" @click="onAdd(item)" />
                    </template>
                    <van-divider />
                </van-swipe-cell>
            </van-list>

        </van-pull-refresh>
        <div style="height:50px"></div>
        <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
    </div>
</template>

<script>
import { Toast } from 'vant';
export default {
    name: 'attentionList',
    data() {
        return {
            userId: 0,
            userName: "",
            onIs: 0,
            attentionList: [],
            loading: false,
            finished: false,
            refreshing: false,
            // 一页多少条记录
            size: 10,
            // 当前页
            current: 1,
            // 总页数
            pages: 1,
            // 总数量
            total: 0,
            show: false,
            actions: [
                { name: '查看他的文章列表' },
                { name: '查看他的分享列表' },
                { name: '查看他都关注了谁' },
                { name: '查看谁在关注他' },
            ],
            // 当前选中
            attentionItem: {}
        }
    },
    //props: ['catchData'],    //接收父组件的方法
    props: {
        articleIs: String
    },
    mounted() {
        // window.console.log(this.articleIs)

        // window.console.log("你进入了正文页")
        // window.console.log("参数为" + this.$route.query.id)
    },
    watch: {
        '$route'(to, from) {
            // 对路由变化作出响应...
            window.console.log(to)
            from
            this.getData(to.query.id, to.query.name, to.query.onIs)
            this.attentionList = [];
            // 激活下拉刷新(手动)因为是手动所以不会清理掉列表信息
            this.onRefresh()
        }
    },
    methods: {
        async onDel(item) {
            let res = await this.$http.delAttention({ id: item.attentionNumber })
            if (res !== undefined && res.meta.status == 200) {
                Toast("取关成功")
                //表示先获取这个元素的下标，然后从这个下标开始计算，删除长度为1的元素
                this.attentionList.splice(this.attentionList.indexOf(item), 1);
            }
        },
        async onAdd(item) {
            window.console.log(item)
            let res = {}
            if (this.onIs == 0)
                res = await this.$http.addAttention({ userNumber: item.userNumber })
            else
                res = await this.$http.addAttention({ userNumber: item.founder })
            if (res !== undefined && res.meta.status == 200) {
                Toast("关注成功")
            }

        },
        onSelect(item) {
            // 默认情况下点击选项时不会自动收起
            // 可以通过 close-on-click-action 属性开启自动收起
            this.show = false;
            if (this.onIs == 0) {
                if (item.name == "查看他的文章列表")
                    this.$router.push({ path: this.redirect || '/articleList', query: { id: this.attentionItem.userNumber } })
                if (item.name == "查看他的分享列表")
                    this.$router.push({ path: this.redirect || '/shareList', query: { id: this.attentionItem.userNumber } })
                if (item.name == "查看他都关注了谁")
                    this.$router.push({
                        path: this.redirect || '/attentionList',
                        query: {
                            id: this.attentionItem.userNumber,
                            name: this.attentionItem.userName,
                            onIs: 0
                        }
                    })
                if (item.name == "查看谁在关注他")
                    this.$router.push({
                        path: this.redirect || '/attentionList',
                        query: {
                            id: this.attentionItem.userNumber,
                            name: this.attentionItem.userName,
                            onIs: 1
                        }
                    })
            }
            else {
                if (item.name == "查看他的文章列表")
                    this.$router.push({ path: this.redirect || '/articleList', query: { id: this.attentionItem.founder } })
                if (item.name == "查看他的分享列表")
                    this.$router.push({ path: this.redirect || '/shareList', query: { id: this.attentionItem.founder } })
                if (item.name == "查看他都关注了谁")
                    this.$router.push({
                        path: this.redirect || '/attentionList',
                        query: {
                            id: this.attentionItem.founder,
                            name: this.attentionItem.userName,
                            onIs: 0
                        }
                    })
                if (item.name == "查看谁在关注他")
                    this.$router.push({
                        path: this.redirect || '/attentionList',
                        query: {
                            id: this.attentionItem.founder,
                            name: this.attentionItem.userName,
                            onIs: 1
                        }
                    })
            }
            // Toast(item.name);
        },
        onClickLeft() {
            // Toast('返回');
            this.$router.go(-1);//返回上一层
        },
        async onLoad() {
            if (this.refreshing) {
                this.attentionList = [];
                this.refreshing = false;
            }

            let data = this.userId + "/" + this.current + "/" + this.size
            let res = {}

            let userIdList = []
            if (this.onIs == 0) {
                res = await this.$http.getAttentionListByUser(data)
                for (let i = 0; i < res.data.records.length; i++)
                    userIdList.push(res.data.records[i].userNumber)
                // 这一块是做用户名填充的
                let res2 = await this.$http.getUserListByOpen(userIdList)
                for (let i = 0; i < res.data.records.length; i++)
                    for (let i2 = 0; i2 < res2.data.length; i2++)
                        if (res.data.records[i].userNumber == res2.data[i2].userId) {
                            res.data.records[i].userName = res2.data[i2].name
                            break
                        } else {
                            res.data.records[i].userName = "该用户不存在"
                        }
            }
            else {
                res = await this.$http.getAttentionByConcerned(data)
                for (let i = 0; i < res.data.records.length; i++)
                    userIdList.push(res.data.records[i].founder)
                // 这一块是做用户名填充的
                let res2 = await this.$http.getUserListByOpen(userIdList)
                for (let i = 0; i < res.data.records.length; i++)
                    for (let i2 = 0; i2 < res2.data.length; i2++)
                        if (res.data.records[i].founder == res2.data[i2].userId) {
                            res.data.records[i].userName = res2.data[i2].name
                            break
                        } else {
                            res.data.records[i].userName = "该用户不存在"
                        }
            }



            this.pages = res.data.pages
            this.total = res.data.total
            // 加载状态结束
            for (let i = 0; i < res.data.records.length; i++)
                this.attentionList.push(res.data.records[i])
            this.loading = false;

            // 数据全部加载完成
            if (this.current >= this.pages) {
                this.finished = true;
            }
            this.current = res.data.current + 1
        },
        onRefresh() {
            // this.attentionList = [];
            // 清空列表数据
            this.finished = false;
            // 重新加载数据
            // 将 loading 设置为 true，表示处于加载状态
            this.loading = true;

            // 一页多少条记录
            this.size = 10
            // 当前页
            this.current = 1
            // 总页数
            this.pages = 1
            // 总数量
            this.total = 0

            this.onLoad();
        },
        onClick(item) {
            window.console.log(item)
            this.attentionItem = item
            this.show = true;
        },
        getData(userId, userName, onIs) {
            if (userId != undefined)
                this.userId = userId
            else
                this.userId = 0

            if (userName != undefined)
                this.userName = userName
            else
                this.userName = "没找到该用户"

            if (onIs != undefined)
                this.onIs = onIs
            else
                this.onIs = 0
            // this.attentionList = []
            // 清空列表数据
            //  this.refreshing = true;
            // 重新加载数据
            // 将 loading 设置为 true，表示处于加载状态
            // this.loading = true;

            //this.onRefresh();
        }
    },
    // 当页面进入时
    beforeRouteEnter(to, from, next) {
        //   window.console.log("你进入了正文页"); // undefined
        //    window.console.log(this); //undefined，不能用this来获取vue实例
        //  window.console.log('组件路由钩子：beforeRouteEnter');
        next(vm => {
            vm
            //    window.console.log(vm); //vm为vue的实例
            //    window.console.log("参数为" + vm.$route.query.id)
            vm.getData(vm.$route.query.id, vm.$route.query.name, vm.$route.query.onIs)
            // else
            //     vm.getData(0)
            // if (vm.$route.query.findString != undefined)
            //     vm.getData2(vm.$route.query.findString)
            //    vm.getData2(vm.$route.query.findString)
            //    window.console.log('组件路由钩子beforeRouteEnter的next');
        });
    },
    // 当页面离开时
    // 这里思路是制作为用户阅读时间
    // beforeRouteLeave(to, from, next) {
    //     // 导航离开该组件的对应路由时调用
    //     // 可以访问组件实例 `this`
    //     // window.console.log(this, 'beforeRouteLeave'); //当前组件实例
    //     // window.console.log(to, '组件独享守卫beforeRouteLeave第一个参数');
    //     // window.console.log(from, '组件独享守卫beforeRouteLeave第二个参数');
    //     // window.console.log(next, '组件独享守卫beforeRouteLeave第三个参数');
    //     next();
    // },
    // 钩子函数导航守卫
    // 当页面更新时候
    // beforeRouteUpdate(to, from, next) {
    //     // 在当前路由改变，但是该组件被复用时调用
    //     // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    //     // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    //     // 可以访问组件实例 `this`
    //     to
    //     from
    //     next
    //     // this.getData(this.$route.query.id)
    //     window.console.log("你切换了路径")
    //     //   window.console.log(this.$route.query.id)
    //     window.console.log(to.query.id)
    //     this.getData(to.query.id, to.query.name)
    //     this.attentionList = [];
    //     // 激活下拉刷新(手动)因为是手动所以不会清理掉列表信息
    //     this.onRefresh()
    //     //    window.console.log(from)
    //     //   window.console.log(next)
    //     //    this.onRefresh
    // }

}




</script>

<style >
</style>